/*
* @Author: Seven
* @Date:   2018-05-07 23:50:17
* @Last Modified by:   Seven
* @Last Modified time: 2018-05-09 22:52:07
*/
$(function () {
	var content1 = $('#content1'),
		content2 = $('#content2'),
		content3 = $('#content3'),
		content4 = $('#content4'),
		text 	 = $('.content2 .text'),
		change   = $('#change'),
		preview  = $('.preview');
	// 点击第一页淡出淡入切换到第二页
	content1.on('click', ()=>{
		content1.fadeOut(1e3, function () {
			content2.fadeIn(1e3);
		});
	});
	// 点击第二页中间文字淡出淡入切换到第三页
	text.on('click', ()=>{
		content2.fadeOut(1e3, ()=>{
			content3.fadeIn(1e3);
		});
	});
	// 点击更换背景文字进行更换
	// (利用flag标记取反实现toggle切换函数的操作)
	var flag = true;
	change.on('click', ()=>{
		flag = !flag;
		if(flag){
			(function (){
				content3.css('background-image', 'url("images/2/content2-bg.jpg")');
			})();
		}
		else{
			(function (){
				content3.css('background-image', 'url("images/5/content3-bg.jpg")');
			})();
		}
	});
	// 点击第三页预览按钮淡出淡入切换到第四页
	preview.on('click', ()=>{
		content3.fadeOut(1e3, ()=>{
			content4.fadeIn(1e3);
		});
	});
	// 第四页中获取第三页输入的数据
	var hisName   = $('.content3 .hisName-input'),
		words	  = $('.content3 .text-input'),
		yourName  = $('.content3 .yourName-input'),
		hisName2  = $('.content4 .hisName'),
		words2	  = $('.content4 .words'),
		yourName2 = $('.content4 .yourName');

	myText(hisName, hisName2);
	myText(words, words2);
	myText(yourName, yourName2);
	// 对第四页文字进行换行处理
	var box		= document.getElementById('words'),
		text 	= document.getElementById('words').innerHTML,
		newText = '';
	for(idx in text){
		if(text[idx] == '，' ){
			newText += text[idx] + '<br/>';
		}
		else if(text[idx] == '。' ){
			newText += text[idx] + '<br/>';
		}
		else{
			newText += text[idx];
		}
	}
	box.innerHTML = newText;

	// 封装的方法
	// 将源位置文本复制到目标位置
	function myText(from, to) {
		from.on('input propertychange', function() {  
		    to.html(myBr($(this).val()));  
		});  
	}
	// 对文字按逗号和句号，进行换行处理
	function myBr(text) {
		var newText = '';
		for(idx in text){
			if(text[idx] == '，' ){
				newText += text[idx] + '<br/>';
			}
			else if(text[idx] == '。' ){
				newText += text[idx] + '<br/>';
			}
			else{
				newText += text[idx];
			}
		}
		return newText;
	}

});